﻿@using Colorful.Models;
@model CodeModel
<div class="am-g page" id="codes" v-cloak>
    <div class="am-u-md-7">
        <i-form v-model="submitting" ref="form" action="@ViewBag.SubmitUrl" class="am-form-h box" style="position:relative;" @@success="handleSuccess" :label-grid="3">
            <input type="hidden" id="code_id" name="Id" value="0" />
            <input type="hidden" name="MenuId" value="@Model.MenuId" />
            <input type="hidden" name="Sort" value="@Model.SortId" />
            <form-item label="分组">
                <i-select name="ParentId" id="code_pid" :options="parentCodes" :val="editCode.ParentId" tree style="width:100%"></i-select>
            </form-item>
            @await Html.PartialAsync("_FormBuilder", new FormBuilderModel(Model.Menu.Config, "code"))
            <form-item label="图标" label-for="code_icon">
                <div class="am-u-md-9">
                    <input type="text" v-model="editCode.icon" name="Icon" id="code_icon" />
                </div>
                <div class="am-u-md-3">
                    <i :class="codeIcon" style="margin-right:8px"></i>
                </div>
            </form-item>
            <div class="am-form-group" style="text-align:center;">
                <a class="am-btn am-btn-default" style="margin-right:20px" @@click="reset(true)">重置</a>
                <button type="button" v-if="editCode.id" class="am-btn am-btn-danger" @@click="handleRemove">删除</button>
                <i-button type="submit" style="padding:8px 30px" :loading="submitting">{{editCode.id?'更新':'添加'}}</i-button>
            </div>
        </i-form>
    </div>
    <div class="am-u-md-5">
        <div class="box box-primary direct-chat direct-chat-primary">
            <div class="box-header with-border">
                <h3 class="box-title">数据字典</h3>
            </div>
            <div class="box-body" id="code_tree">
                <Tree ref="tree" :data="codes" sortable @@on-sort="sort" @@on-select-change="selectItem"></Tree>
            </div>
        </div>
    </div>
</div>
@section script {
<script type="text/javascript">
    var vm = new Vue({
        el: '#codes',
        data: {
            submitting: false,
            codes: [],
            parentCodes: [],
            codeFlags: @Html.ToJson(Model.CodeFlags.Select(a => new { id = a.id, text = a.text }).ToArray()),
            editCode: { icon:'dot-circle-o'},
            batch: false
        },
        computed: {
            codeIcon: function () {
                if (!this.editCode.icon)
                    return '';

                if (this.editCode.icon.startWith('icon-'))
                    return 'icon ' + this.editCode.icon;
                if (this.editCode.icon.startWith('ic-'))
                    return 'ic ' + this.editCode.icon;
                return 'am-icon-' + this.editCode.icon;
            }
        },
        methods: {
            reset: function (resetAll) {
                var parentId = $(document.getElementsByName('ParentId')).val();
                if (resetAll)
                    this.$refs.form.reset();
                else {
                    $('#code_name').val('');
                    $('#code_nameen').val('');
                }
                $('#code_id').val('0');
                this.editCode = { icon: this.editCode.icon? this.editCode.icon: 'dot-circle-o', ParentId: parentId };
            },
            load: function () {
                let self = this;
                $.post('@ViewBag.TreeUrl', { open: true, menuId: @Model.MenuId }, function (datas) {
                    var data = datas[0].children;
                    self.parentCodes = JSON.parse(JSON.stringify(data));
                    self.codes = data;
                });
            },
            sort: function (ids) {
                console.log("sort:", ids);
                return;
                let self = this;
                $.post('@ViewBag.OrderUrl', { ids: ids }, function (result) {
                    if (result.succ)
                        self.$Message.success('排序成功！');
                    else
                        alert(result.data);
                });
            },
            selectItem: function (items) {
                let data = items[0];
                let self = this;
                this.reset(true);
                this.editCode = data;
                $.post('@ViewBag.InfoUrl', { id: data.id }, function (result) {
                    self.$refs.form.fill(result);
                });
            },
            handleRemove: function () {
                if (!this.editCode) return;
                let self = this;
                if (confirm("确定删除？")) {
                    $.post('@ViewBag.DelUrl', { id: this.editCode.id, menuId:@Model.MenuId, sort:@Model.SortId }, function (result) {
                        if (result.succ) {
                            self.reset(true);
                            self.$Message.success("删除成功！");
                            self.load();
                        } else {
                            alert(result.data);
                        }
                    })
                }
            },
            flagChange: function(data) {
                switch (data.id) {
                    case "1": //Radio
                        this.editCode.icon = "dot-circle-o";
                        break;
                    case "2":
                        this.editCode.icon = "check-square";
                        break;
                    case "3":
                        this.editCode.icon = "square-o";
                        break;
                    case "4":
                        this.editCode.icon = "square-o";
                        break;
                }
            },
            handleSuccess: function () {
                this.$Message.success("保存成功");
                this.load();
                this.reset();
            }
        },
        mounted: function () {
            $(this.$refs.form.$el).form('select');
            this.load();
        }
    });
</script>
}